<template>
  <view class="container flex-col">
    <nav-bar title="门店管理" class="nav-bar" ref="navBarRef" />
    <view class="search" :style="{ top: `calc(${navBarHeight}px)` }"
      ><search @searchVal="getSearchVal" placeholder="请输入门店名称"></search
    ></view>
    <scroll-view
      class="flex1"
      @scrolltolower="handleNextPage"
      scroll-y
      refresher-enabled
      :refresher-triggered="refresherTriggered"
      @refresherrefresh="handleRefresherPulling"
      :style="{
        marginTop: `calc(${searchHeight}px + 20rpx)`,
      }"
    >
      <view v-if="list.length > 0" class="content">
        <view class="card" v-for="item in list" :key="item.id">
          <view class="top">
            <view class="img"><image :src="item.logo" mode=""></image></view>
            <view class="con">
              <view class="nam-box">
                <view
                  class="default"
                  :class="[item.status ? 'normal' : 'disable']"
                  >{{ item.status ? "正常" : "禁用" }}</view
                >
                <view class="name title-hidden-one">{{ item.shopName }}</view>
              </view>
              <view class="txt title-hidden-one address">{{
                `${item.provinceCode}${item.cityCode}${item.areaCode}${item.address}`
              }}</view>
              <view class="txt" v-if="item.tradeTime"
                >营业时间：{{ item.tradeTime || "" }}</view
              >
              <view class="txt" v-if="item.shopServiceDesc"
                >配送方式：{{ item.shopServiceDesc || "" }}</view
              >
            </view>
          </view>
          <view class="btm">
            <view @click="jumpEdit(item.id)" class="lef" style="color: #668ce2">
              <text class="iconfont icon-bianji2"></text>
              编辑
            </view>
            <view>|</view>
            <view @click="changeState(item)" class="rig" style="color: #a4a4a4">
              <div v-if="!!item.status">
                <text class="iconfont icon-jinzhi"></text>
                禁用
              </div>
              <div v-else class="flexAIC" style="color: #ffb72f">
                <u-icon name="checkmark-circle" color="#ffb72f" size="32rpx" />
                <text class="marginLeft-11">启用</text>
              </div>
            </view>
          </view>
        </view>
        <view class="blank-box"></view>
      </view>

      <view
        class="content"
        v-else
        :style="{
          marginTop: `calc(50%)`,
        }"
      >
        <xh-empty />
      </view>

      <confirm-modal
        v-if="confirmModal.show"
        :title="confirmModal.title"
        :content="confirmModal.content"
        :confirmText="confirmModal.confirmText"
        :cancelText="confirmModal.cancelText"
        :showCancelButton="confirmModal.showCancelButton"
        :confirmTextColor="confirmModal.confirmTextColor"
        :cancelTextColor="confirmModal.cancelTextColor"
        :confirmBgColor="confirmModal.confirmBgColor"
        :cancelBgColor="confirmModal.cancelBgColor"
        @getConfirmModal="getConfirmModal"
      ></confirm-modal>
    </scroll-view>
  </view>
</template>

<script>
import themeColor from "@/const/theme";
import search from "@/components/baseComponents/search/index.vue";
import { getShopList, updateShopStatus } from "@/service/api/sp-store";
import { getMemberList } from "@/service/api/sp-member/member";
export default {
  components: { search },
  watch: {
    inputVal(val) {
      console.log("监听watch", val);
    },
  },
  data() {
    return {
      navBarHeight: 60,
      searchHeight: 72,

      ossBaseUrl: process.env.VUE_APP_BASE_FileUrl,
      inputVal: "",

      confirmModal: {
        show: false,
        title: "提示",
        content: "门店信息不全，请补充",
        confirmText: "去补充",
        cancelText: "取消",
        showCancelButton: true,
        confirmTextColor: themeColor.themeColor.info,
        cancelTextColor: "",
        confirmBgColor: themeColor.themeColor.primary,
        cancelBgColor: themeColor.themeColor.info,
      },

      list: [],
      params: {
        // 门店名称
        name: "",
        pageNum: 1,
        pageSize: 10,
      },
      hasNextPage: false,
      refresherTriggered: false,
      tempShopInfo: null,
    };
  },
  onShow() {
    this.fetchShopList(true);
  },
  onLoad() {
    this.handleGetNavBarHeight();
  },
  methods: {
    handleGetNavBarHeight() {
      if (this.$refs.navBarRef) {
        const navBar = this.uGetRect(".nav-bar");
        const search = this.uGetRect(".search");
        Promise.all([search, navBar]).then((res) => {
          this.searchHeight = res[0].height;
          this.navBarHeight = res[1].height;
        });
        return;
      }
      setTimeout(() => {
        this.handleGetNavBarHeight();
      }, 100);
    },
    uGetRect(selector, all) {
      return new Promise((resolve) => {
        uni
          .createSelectorQuery()
          .in(this)
          [all ? "selectAll" : "select"](selector)
          .boundingClientRect((rect) => {
            if (all && Array.isArray(rect) && rect.length) {
              resolve(rect);
            }
            if (!all && rect) {
              resolve(rect);
            }
          })
          .exec();
      });
    },
    getSearchVal(e) {
      this.params.name = e;
      this.$nextTick(() => {
        this.fetchShopList(true);
      });
    },
    // 编辑
    jumpEdit(val) {
      this.$Router.push({
        name: "storeSetup",
        params: {
          id: val,
        },
      });
    },
    // 修改状态
    async changeState(val) {
      this.tempShopInfo = val;
      const status = val.status ? 0 : 1;
      updateShopStatus({
        id: val.id,
        status,
      })
        .then((res) => {
          console.log("修改状态成功", res);
          uni.showToast({
            title: "修改成功",
            icon: "success",
          });
          this.list.map((v) => {
            if (v.id === val.id) {
              v.status = status;
            }
          });
        })
        .catch((err) => {
          console.log("修改状态失败", err);
          if (err?.code === -110) {
            //信息不全需要补充的操作
            this.confirmModal.show = true;
          } else {
            uni.showToast({
              title: err.msg,
              icon: "none",
            });
          }
        });
    },
    getConfirmModal(val) {
      this.confirmModal.show = false;
      if (val === "confirm") {
        this.$Router.push({
          name: "storeSetup",
          params: {
            id: this.tempShopInfo.id,
          },
        });
      }
    },
    async fetchShopList(isClear = false) {
      if (isClear) {
        this.list = [];
        this.params.pageNum = 1;
      }
      const res = await getShopList(this.params);
      if (res) {
        const { hasNextPage, list } = res;
        this.hasNextPage = hasNextPage;
        list.map((v) => {
          v.logo = this.ossBaseUrl + v.logo;
        });
        this.list = [...this.list, ...list];
        this.refresherTriggered = false;
      }
    },
    handleRefresherPulling() {
      this.refresherTriggered = true;
      setTimeout(() => {
        this.fetchShopList(true);
      }, 200);
    },
    handleNextPage() {
      if (!this.hasNextPage) return;
      this.params.pageNum += 1;
      this.fetchShopList();
    },
  },
};
</script>

<style>
page {
  background-color: #f7f7f7;
}
</style>
<style lang="scss" scoped>
.search {
  background-color: white;
  padding: 30rpx 24rpx;
  box-sizing: border-box;
  position: fixed;
  z-index: 10;
}

.blank-box {
  width: 686rpx;
  height: 100rpx;
}
.container {
  height: 100vh;
  overflow: hidden;
  //overflow-y: scroll;
}
.content {
  //position: absolute;
  width: 100%;
  .card {
    width: 686rpx;
    background: #ffffff;
    border-radius: 12rpx;
    margin: 0 auto;
    margin-bottom: 19rpx;
    overflow: hidden;
    .top {
      display: flex;
      justify-content: space-between;
      border-bottom: 1rpx solid #f8f8f8;
      padding: 33rpx 26rpx;
      padding-bottom: 29rpx;
      box-sizing: border-box;
      .img {
        width: 120rpx;
        height: 120rpx;
        border-radius: 8rpx;
        overflow: hidden;
        image {
          width: 100%;
          height: 100%;
        }
      }
      .con {
        margin-left: 26rpx;
        .nam-box {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          .default {
            border-radius: 8rpx;
            font-size: 22rpx;
            font-weight: 500;
            width: 70rpx;
            height: 30rpx;
            text-align: center;
          }
          .normal {
            color: #4ab759;
            background-color: #f1fcf2;
            border: 1px solid #4ab759;
          }
          .disable {
            color: #f05357;
            background-color: #ffeff5;
            border: 1px solid #f05357;
          }
          .name {
            width: 378rpx;
            font-size: 29rpx;
            font-weight: bold;
            color: #131313;
            margin-left: 15rpx;
          }
        }
        .txt {
          font-size: 26rpx;
          font-weight: 500;
          color: #131313;
          opacity: 0.7;
          margin-top: 19rpx;
        }
        .address {
          width: 481rpx;
        }
      }
    }
    .btm {
      width: 100%;
      display: flex;
      justify-content: space-around;
      font-size: 29rpx;
      font-weight: 500;
      padding: 26rpx 0;
      box-sizing: border-box;
      color: #e9e9e9;
      .lef,
      .rig {
        display: flex;
        flex: 2;
        align-items: center;
        justify-content: center;
        .iconfont {
          margin-right: 11rpx;
        }
      }
    }
  }
}
</style>
